<template>
  <!-- 黑白名单组件 -->
  <div class="user_recharge_query">
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline"
      size="mini"
    >
      <el-form-item label="用户名:">
        <el-input
          placeholder="用户名"
          v-model="userName"
          style="width: 180px"
          clearable
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门名称:">
        <el-input
          placeholder="部门名称"
          v-model="departmentName"
          style="width: 180px"
          clearable
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="卡号:">
        <el-input
          placeholder="卡号"
          v-model="cardNumber"
          style="width: 180px"
          clearable
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item label="下发状态:">
        <el-select
          v-model="downloadState"
          placeholder="请选择"
          size="mini"
          clearable
        >
          <el-option
            v-for="item in downloadStateOption"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备:">
        <el-select
          v-model="terminalName"
          placeholder="请选择"
          size="mini"
          clearable
        >
          <el-option
            v-for="item in terminalNameOption"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="activeName == 'first'">
        <el-button
          type="primary"
          @click="gosearch()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="onExport()"
          size="mini"
          icon="el-icon-document-copy"
          >导出</el-button
        >
        <el-button
          type="primary"
          @click="onExport('print')"
          size="mini"
           icon="el-icon-printer"
          >打印</el-button
        >
      </el-form-item>
      <el-form-item v-if="activeName == 'first'">
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col
              :span="6"
              v-for="item in Object.keys(formThead)"
              :key="item"
            >
              <el-checkbox
                :label="formThead[item].label"
                v-model="formThead[item].checked"
                @change="checkboxChanged()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button
            slot="reference"
            size="mini"
            type="primary"
            icon="el-icon-edit-outline"
            >自定义</el-button
          >
        </el-popover>
      </el-form-item>
      <el-form-item v-if="activeName == 'second'">
        <el-button
          type="primary"
          @click="gosearchStatistics()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="onExportStatistics()"
          size="mini"
          icon="el-icon-document-copy"
          >导出</el-button
        >
        <el-button
          type="primary"
          @click="onExportStatistics('print')"
          size="mini"
          icon="el-icon-printer"
          >打印</el-button
        >
      </el-form-item>
      <el-form-item v-if="activeName == 'second'">
        <el-popover width="550" placement="top" trigger="click">
          <el-row>
            <el-col
              :span="6"
              v-for="item in Object.keys(formThead2)"
              :key="item"
            >
              <el-checkbox
                :label="formThead2[item].label"
                v-model="formThead2[item].checked"
                @change="checkboxChanged2()"
              ></el-checkbox>
            </el-col>
          </el-row>
          <el-button
            slot="reference"
            size="mini"
            type="primary"
            icon="el-icon-edit-outline"
            >自定义</el-button
          >
        </el-popover>
      </el-form-item>
      <!-- <el-button type="danger" @click="onDelete" size="mini" icon="el-icon-delete" v-if="isauth('consume_name_edit')">取消授权</el-button> -->
    </el-form>
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="名单详情" name="first">
        <el-table
          :data="tableinformation"
          v-loading="loading"
          style="width: 100%"
          border="border"
          :header-cell-style="headFirst"
          highlight-current-row
          @selection-change="handleSelectionChange"
          ref="table"
          :cell-style="(res) => headFirst_col(res, [])"
        >
          <!-- <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column> -->
          <el-table-column
            prop="cardNumber"
            label="卡号"
            min-width="110px"
            v-if="formThead.cardNumber.checked"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="用户姓名"
            v-if="formThead.userName.checked"
          ></el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门名称"
            min-width="120px"
            v-if="formThead.departmentName.checked"
          ></el-table-column>
          <el-table-column
            prop="terminalCode"
            label="设备编号"
            v-if="formThead.terminalCode.checked"
          ></el-table-column>
          <el-table-column
            prop="lastUpdate"
            label="更新时间"
            min-width="158"
            v-if="formThead.lastUpdate.checked"
          ></el-table-column>
          <el-table-column
            prop="updateFlag"
            label="名单类型"
            v-if="formThead.updateFlag.checked"
          >
            <template slot-scope="scope">{{
              scope.row.updateFlag | updateblack
            }}</template>
          </el-table-column>
          <el-table-column
            prop="syncState"
            label="同步状态"
            v-if="formThead.syncState.checked"
          >
            <template slot-scope="scope">{{
              scope.row.syncState | syncStateblack
            }}</template>
          </el-table-column>
          <el-table-column
            prop="downloadState"
            label="下发状态"
            v-if="formThead.downloadState.checked"
          >
            <template slot-scope="scope">{{
              scope.row.downloadState | downloadStateblack
            }}</template>
          </el-table-column>
          <el-table-column
            prop="downloadTime"
            label="下发成功时间"
            min-width="158"
            v-if="formThead.downloadTime.checked"
          ></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="reissue(scope.row)" type="text" size="small"
                >重新下发</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChangepage"
            @current-change="handleCurrentChangepage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :current-page="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="名单统计" name="second">
        <el-table
          v-loading="loading2"
          :data="detailslist2"
          ref="detailslist2"
          border
          highlight-current-row
          :header-cell-style="headFirst"
          style="width: 100%"
          :cell-style="(res) => headFirst_col(res, [])"
        >
          <el-table-column
            prop="terminalName"
            label="设备名称"
            min-width="110px"
            v-if="formThead2.terminalName.checked"
          ></el-table-column>
          <el-table-column
            prop="terminalCode"
            label="设备编号"
            v-if="formThead2.terminalCode.checked"
          ></el-table-column>
          <el-table-column
            prop="rosterSum"
            label="名单总数"
            v-if="formThead2.rosterSum.checked"
          ></el-table-column>
          <el-table-column
            prop="unDownloadRosterSum"
            label="未下发名单数量"
            v-if="formThead2.unDownloadRosterSum.checked"
          ></el-table-column>
          <el-table-column
            prop="unSyncSum"
            label="未同步数量"
            v-if="formThead2.unSyncSum.checked"
          ></el-table-column>
          <el-table-column
            prop="successRosterSum"
            label="下发成功数量"
            v-if="formThead2.successRosterSum.checked"
          ></el-table-column>

          <el-table-column
            prop="downloadFailRosterSum"
            label="下发失败名单数量"
            v-if="formThead2.downloadFailRosterSum.checked"
          ></el-table-column>
          <el-table-column label="操作" width="100" v-if="false">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >重新下发</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChangepage2"
            :current-page="currentPage2"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount2"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filename: "电吹风",
      terminalType: 28,
      activeName: "first",
      /**
       * 名单详情
       */
      //   filename: "消费黑白名单",
      loading: false,
      pageNum: 1,
      pageSize: 20,
      currentPage: 0,
      recordCount: 0,
      messageType: 0,
      sortName: "",
      administrator: "",
      changeschoolid: "",
      tableinformation: [],
      chageList: [],
      unitGuid: "",
      userName: "",
      departmentName: "",
      cardNumber: "",
      searchInfo: {},
      elform: {},
      // 下发状态
      downloadState: "",
      // 下发状态类型列表
      downloadStateOption: [
        {
          label: "未下发",
          value: 0,
        },
        {
          label: "已下发",
          value: 1,
        },
        {
          label: "远程开门",
          value: 4,
        },
        {
          label: "名单内容有误",
          value: 5,
        },
        {
          label: "找不到对应的设备",
          value: 6,
        },
        {
          label: "名单已过期",
          value: 7,
        },
      ],
      // 设备名称
      terminalName: "",
      // 设备名称类型列表
      terminalNameOption: [],
      formThead: {
        cardNumber: { label: "卡号", prop: "cardNumber", checked: true },
        userName: { label: "用户姓名", prop: "userName", checked: true },
        departmentName: {
          label: "部门名称",
          prop: "departmentName",
          checked: true,
        },
        terminalCode: {
          label: "设备编号",
          prop: "terminalCode",
          checked: true,
        },
        lastUpdate: { label: "更新时间", prop: "lastUpdate", checked: true },
        updateFlag: { label: "名单类型", prop: "updateFlag", checked: true },
        syncState: { label: "同步状态", prop: "syncState", checked: true },
        downloadState: {
          label: "下发状态",
          prop: "downloadState",
          checked: true,
        },
        downloadTime: {
          label: "下发成功时间",
          prop: "downloadTime",
          checked: true,
        },
      },
      /**
       * 名单统计
       */
      loading2: false,
      detailslist2: [],
      formThead2: {
        terminalName: {
          label: "设备名称",
          prop: "terminalName",
          checked: true,
        },
        terminalCode: {
          label: "设备编号",
          prop: "terminalCode",
          checked: true,
        },
        rosterSum: { label: "名单总数", prop: "rosterSum", checked: true },
        unDownloadRosterSum: {
          label: "未下发名单数量",
          prop: "unDownloadRosterSum",
          checked: true,
        },
        unSyncSum: { label: "未同步数量", prop: "unSyncSum", checked: true },
        successRosterSum: {
          label: "下发成功数量",
          prop: "successRosterSum",
          checked: true,
        },
        downloadFailRosterSum: {
          label: "下发失败名单数量",
          prop: "downloadFailRosterSum",
          checked: true,
        },
      },
      pageNum2: 1,
      pageSize2: 20,
      searchInfo2: {},
      currentPage2: 0,
      recordCount2: 0,
      exportlist2: [],
    };
  },

  filters: {
    updateblack(val) {
      let updateFlagObj = { 1: "新增", 2: "覆盖", 3: "删除" };
      return updateFlagObj[val];
    },
    downloadStateblack(val) {
      let updateFlagObj = {
        0: "未下发",
        1: "已下发",
        2: "下发失败",
        5: "名单内容有误",
        6: "找不到对应的设备",
        7: "名单已过期",
      };
      return updateFlagObj[val];
    },
    syncStateblack(val) {
      let updateFlagObj = { 0: "未同步", 1: "已同步" };
      return updateFlagObj[val];
    },
  },
  created() {
    this.changeschoolid = this.$store.state.user.changeschoolid;
    this.userGuid = sessionStorage.getItem("administrator");
    this.getTerminal();
  },
  methods: {
    // 获取设备列表
    getTerminal() {
      this.$http({
        url: this.$http.adornUrl("/terminal/terminal-info-brief-list"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            terminalType: this.terminalType,
            unitGuid: this.changeschoolid,
          },
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          if (data.messageContent) {
            this.terminalNameOption = data.messageContent.map((item) => {
              return {
                label: item.terminalName,
                value: item.terminalGuid,
              };
            });
          }
          console.log(this.terminalNameOption);
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 选中数据
    handleSelectionChange(val) {
      this.chageList = val;
    },

    /**
     * 名单详情
     */
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs["table"].doLayout();
      });
    },
    //查询
    gosearch() {
      this.pageNum = 1;
      this.searchInfo = {
        cardNumber: this.cardNumber,
        userName: this.userName,
        terminalType: this.terminalType,
        departmentName: this.departmentName,
        unitGuid: this.changeschoolid,
        terminalGuid: this.terminalName,
        downloadState: this.downloadState,
      };
      this.searchinit();
    },
    //记录查询
    searchinit() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/terminal/terminal-roster-search-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo,
            sortName: this.sortName,
          },
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        this.loading = false;
        if (data.messageCode == 200) {
          this.tableinformation = data.messageContent.data;
          this.pageNum = data.messageContent.pageNum;
          this.pageSize = data.messageContent.pageSize;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: "查询成功当前暂无数据",
              type: "success",
            });
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 重新下发
    reissue(row) {
      let searchInfo = {
        nameGuid: row.nameGuid,
        terminalGuid: row.terminalGuid,
        terminalType: this.terminalType,
        unitGuid: this.changeschoolid,
      };
      this.$http({
        url: this.$http.adornUrl("/terminal/terminal-roster-reset"),
        method: "post",
        data: this.$http.adornData({
          messageContent: searchInfo,
        }),
      }).then(({ data }) => {
        this.loading2 = false;
        if (data.messageCode == 200) {
          this.$message({
            message: "下发成功",
            type: "success",
          });
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 删除选中数据，取消授权
    onDelete() {
      let namelistGuid = [];
      this.chageList.map((item) => {
        namelistGuid.push(item.nameGuid);
      });
      if (namelistGuid.length == 0) {
        this.$message({
          message: "请选择取消授权数据",
          type: "warning",
        });
        return false;
      }
      this.$http({
        url: this.$http.adornUrl("/terminal/doorLock/empower-name-delete"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            namelistGuid: namelistGuid,
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        console.log(data);
        if (data.messageCode == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.gosearch();
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 导出
    async onExport(type) {
      if (this.recordCount == 0) {
        this.$message({
          message: "请查询数据后,在进行此操作",
          type: "warning",
        });
        return false;
      }
      await this.outexecel();
      if (type == "print") {
        this.printJS();
      } else {
        this.inExport();
      }
    },
    // 获取名单详情所有数据
    outexecel() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl("/terminal/terminal-roster-search-page"),
            method: "post",
            data: _this.$http.adornData({
              messageContent: {
                asc: true,
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo,
              },
              messageType: 0,
            }),
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.detailslistExportlist = data.messageContent.data || [];
              // 过滤数据
              _this.detailslistExportlist.map((item) => {
                item.updateFlag = _this.$options.filters.updateblack(
                  item.updateFlag
                );
                item.downloadState = _this.$options.filters.downloadStateblack(
                  item.downloadState
                );
                item.syncState = _this.$options.filters.syncStateblack(
                  item.syncState
                );
              });
              resolve(_this.detailslistExportlist);
            } else {
              _this.$message.error(data.errorMessage);
              reject(data.errorMessage);
            }
          });
      });
    },
    // 打印
    printJS() {
      let someJSONdata = this.detailslistExportlist;
      const title = this.filename + "黑白名单详情表";
      this.unitName = sessionStorage.getItem("unitName");
      const properties = [];

      for (let key in this.formThead) {
        if (this.formThead[key].checked) {
          if (key == "lastUpdate" || key == "downloadTime") {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 130 / (Object.keys(this.formThead).length + 1) + "%",
            });
          } else {
            properties.push({
              displayName: this.formThead[key].label,
              field: this.formThead[key].prop,
              columnSize: 100 / (Object.keys(this.formThead).length + 1) + "%",
            });
          }
        }
      }

      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `—— 至 ${this.formatDate(
            new Date(this.getNowTime("yy-mm-dd hh:mm:ss")),
            "yyyy-MM-dd"
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: "json",
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          sessionStorage.getItem("username"),
          this.getNowTime("yy-mm-dd hh:mm:ss")
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle(),
      });
    },
    // 导出数据需要用到的
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    // 导出
    inExport() {
      require.ensure([], () => {
        let multiHeader = [];
        let merges = [];
        let filterValArr = [];
        let tHeaderarr = [];

        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            filterValArr.push(this.formThead[key].prop);
            tHeaderarr.push(this.formThead[key].label);
          }
        }
        const tHeader = tHeaderarr;

        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const filterVal = filterValArr;
        const list = this.detailslistExportlist;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          merges,
          filename: this.filename + "黑白名单详情" + this.getimeto(),
        });
      });
    },
    //分页
    handleSizeChangepage(val) {
      this.pageSize = val;
      this.searchinit();
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
      this.searchinit();
    },
    /**
     * 名单统计
     */
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs["detailslist2"].doLayout();
      });
    },
    handleClick(row) {},
    //查询
    gosearchStatistics() {
      this.pageNum2 = 1;
      this.searchInfo = {
        cardNumber: this.cardNumber,
        userName: this.userName,
        terminalType: this.terminalType,
        departmentName: this.departmentName,
        unitGuid: this.changeschoolid,
        terminalGuid: this.terminalName,
        downloadState: this.downloadState,
      };
      this.searchStatistics();
    },
    // 查询统计数据
    searchStatistics() {
      this.loading2 = true;
      this.$http({
        url: this.$http.adornUrl("/terminal/terminal-roster-statistics"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo,
            sortName: this.sortName,
          },
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        this.loading2 = false;
        if (data.messageCode == 200) {
          this.detailslist2 = data.messageContent.data;
          this.pageNum2 = data.messageContent.pageNum;
          this.pageSize2 = data.messageContent.pageSize;
          this.recordCount2 = data.messageContent.recordCount;
          this.currentPage2 = data.messageContent.pageNum;
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: "查询成功当前暂无数据",
              type: "success",
            });
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },

    async onExportStatistics(type) {
      await this.getStatisticsAll();
      if (type == "print") {
        this.printStatisticsJS();
      } else {
        this.export2Excel2();
      }
    },
    // 获取统计所有数据
    getStatisticsAll() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl("/terminal/terminal-roster-statistics"),
            method: "post",
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount2,
                searchInfo: _this.searchInfo,
              },
              messageType: 0,
            }),
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data;
              resolve(_this.exportlist);
            } else {
              _this.$message.error(data.errorMessage);

              reject(data.errorMessage);
            }
          });
      });
    },
    // 打印
    printStatisticsJS() {
      let someJSONdata = this.exportlist;
      const title = this.filename + "黑白名单统计表";
      this.unitName = sessionStorage.getItem("unitName");
      const properties = [];

      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
            });
        }
      }

      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `—— 至 ${this.formatDate(
            new Date(this.getNowTime("yy-mm-dd hh:mm:ss")),
            "yyyy-MM-dd"
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: "json",
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 1,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          sessionStorage.getItem("username"),
          this.getNowTime("yy-mm-dd hh:mm:ss")
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle(),
      });
    },
    // 导出
    export2Excel2() {
      const nowtime = this.getimeto();
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const multiHeader = [];
        const multiHeader2 = [];
        const merges = [];
        let tHeaderarr = [];
        let filterValArr = [];
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label);
            console.log(this.formThead2[key].prop);

            filterValArr.push(this.formThead2[key].prop);
          }
        }
        const tHeader = tHeaderarr;
        const filterVal = filterValArr;
        const list = this.exportlist;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + "黑白名单统计" + nowtime,
        });
      });
    },
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.searchStatistics();
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val;
      this.searchStatistics();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 280px;
}

.user_recharge_query {
  padding: 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 5px;
  }  
  .page {
    .el-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>